<template>
    <!-- 1滴灌系统  2喷灌系统-->
    <div class="moduleBox">
        <div class="statisticsBox" v-if="pageData.switchover">
            <div class="title">灌溉统计</div>
            <div class="listBoxs">
                <div class="topmsgbox" :class="pageData.selectTr ? 'topmsgboxActive' : ''">
                    <div class="time">
                        <!-- <span>灌溉时段：2024年3月1日——2024年3月2日</span> -->
                        <span>灌溉时段：{{ pageData.selectTr ? (pageData.selectTr.irrigationPeriod ? pageData.selectTr.irrigationPeriod : "") : "" }}</span>
                    </div>
                    <div class="staTip">
                        <div>灌溉量：{{ irrigationvolume() }}L</div>
                        <div>株灌溉量：{{ pageData.selectTr ? (pageData.selectTr.plantIrrigation ? pageData.selectTr.plantIrrigation : 0) : 0 }}L</div>
                    </div>
                </div>
                <div class="tablesBox">
                    <el-scrollbar class="tablesscrollbar">
                        <table class="tables" cellpadding="0" cellspacing="0">
                            <tr>
                                <td colspan="2">灌区</td>
                                <td>阀门</td>
                                <td>设计流量</td>
                                <td>完成流量</td>
                                <td>当前进度</td>
                            </tr>
                            <tr v-for="item in pageData.subarea" :key="item.deviceId" class="tableItem" :class="pageData.selectTr != undefined && pageData.selectTr.deviceId == item.deviceId ? 'serlectTableTr' : ''" @click="clicks(item)" @mouseover="tabelTrMouseover(item, pageData.selectTr)" @mouseout="tabelTrMouseout(item, pageData.selectTr)" :title="item.irrigationStatus == 2 ? '已灌溉' : '未灌溉'">
                                <td style="width: 0.2rem">
                                    <div class="hollow" :class="item.irrigationStatus == 2 ? 'solid' : ''"></div>
                                </td>
                                <td class="pl">
                                    <div class="tdcell">
                                        <!-- irrigation_status 灌溉状态  1未灌溉 2已灌溉 -->
                                        <!-- <span class="hollow" :class="item.irrigationStatus == 2 ? 'solid' : ''"></span> -->
                                        {{ item.itemName ? item.itemName : "无分区" }}
                                    </div>
                                </td>
                                <td>
                                    <div class="tdcell">
                                        {{ item.valveCondition == "1" ? "打开" : "关闭" }}
                                    </div>
                                </td>
                                <td>
                                    <div class="tdcell">{{ item.designFlow ? item.designFlow : 0 }}m³</div>
                                </td>
                                <td>
                                    <div class="tdcell">{{ item.wompletionFlow ? item.wompletionFlow : 0 }}m³</div>
                                </td>
                                <td class="pr">
                                    <div class="tdcell">{{ item.currentProgress ? item.currentProgress : 0 }}%</div>
                                </td>
                            </tr>
                        </table>
                    </el-scrollbar>
                </div>

                <div class="btnBox" v-if="pageData.selectTr != undefined">
                    <div>
                        <div class="btn" @click="cutDoc()" v-if="pageData.selectTr.valveCondition == '0'">分区参数</div>
                        <div class="btn" v-else @click="popMsg.error('请先停止灌溉后再进行此操作！')">分区参数</div>
                    </div>
                    <div class="rightBtn">
                        <div class="btn" v-if="pageData.selectTr.valveCondition != 1" @click="subareaHandle('1')">开始</div>
                        <div class="btn" v-else @click="subareaHandle('0')">停止</div>
                    </div>
                </div>
            </div>

            <!-- <div class="conList">
                <table class="table">
                    <tr>
                        <th class="pl"><div class="thcell">灌区</div></th>
                        <th><div class="thcell">阀门</div></th>
                        <th><div class="thcell">设计流量</div></th>
                        <th><div class="thcell">完成流量</div></th>
                        <th class="pr"><div class="thcell">当前进度</div></th>
                    </tr>
                </table>
                <div class="tableRoll">
                    <table class="table">
                        <tr v-for="item in pageData.subarea" :key="item.deviceId" class="tableItem" :class="pageData.selectTr != undefined && pageData.selectTr.deviceId == item.deviceId ? 'serlectTableTr' : ''" @click="clicks(item)" @mouseover="tabelTrMouseover(item, pageData.selectTr)" @mouseout="tabelTrMouseout(item, pageData.selectTr)" :title="item.irrigationStatus == 2 ? '已灌溉' : '未灌溉'">
                            <td class="pl">
                                <div class="tdcell">
                                    <span class="hollow" :class="item.irrigationStatus == 2 ? 'solid' : ''"></span>{{ item.itemName ? item.itemName : "无分区" }}
                                </div>
                            </td>
                            <td>
                                <div class="tdcell">
                                    {{ item.valveCondition == "0" ? "打开" : "关闭" }}
                                </div>
                            </td>
                            <td>
                                <div class="tdcell">{{ item.designFlow ? item.designFlow : 0 }}m³</div>
                            </td>
                            <td>
                                <div class="tdcell">{{ item.wompletionFlow ? item.wompletionFlow : 0 }}m³</div>
                            </td>
                            <td class="pr">
                                <div class="tdcell">{{ item.currentProgress ? item.currentProgress : 0 }}%</div>
                            </td>
                        </tr>
                    </table>
                </div>
            </div> -->
            <!-- <div class="btnBox" v-if="pageData.selectTr != undefined">
                <div>
                    <div class="btn" @click="cutDoc()">分区参数</div>
                </div>
                <div class="rightBtn">
                    <div class="btn" v-if="pageData.selectTr.valveCondition != 0" @click="subareaHandle('1')">开始</div>
                    <div class="btn" v-else @click="subareaHandle('0')">停止</div>
                </div>
            </div> -->
        </div>
        <div class="statisticsBox" v-else>
            <div class="title">分区参数</div>
            <div class="msgBox">
                <div class="msgtablesBox">
                    <el-scrollbar class="tablesscrollbar">
                        <table class="msgtables" cellpadding="0" cellspacing="0">
                            <tr>
                                <td>灌溉时间：</td>
                                <td>
                                    <div class="inputNumber dateTimeBox">
                                        <input type="date" name="" id="" v-model="timeFrame.date" />
                                        <input type="time" name="" id="" v-model="timeFrame.time" />
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td>清水时间：</td>
                                <td>
                                    <div class="inputNumber">
                                        <input type="number" name="number" min="0" value="0" step="0.01" v-model="clearWater" />
                                        <div class="unit">分</div>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td>灌溉选择：</td>
                                <td>
                                    <select name="" id="" class="selectBox" v-model="pageData.selectTr.irrigationSelectionId">
                                        <option disabled value="0">请选择</option>
                                        <option value="1">清水优先</option>
                                        <option value="2">肥水优先</option>
                                        <option value="3">肥料优先</option>
                                    </select>
                                </td>
                            </tr>
                            <tr>
                                <td>株灌溉量：</td>
                                <td>
                                    <div class="inputNumber">
                                        <input type="number" name="number" min="0" value="0" step="0.01" @input="calculateDesignFlow" v-model="pageData.selectTr.plantIrrigation" />
                                        <div class="unit">升</div>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td>亩株数：</td>
                                <td>
                                    <div class="inputNumber">
                                        <input type="number" name="number" min="0" value="0" step="0.01" @input="calculateDesignFlow" v-model="pageData.selectTr.plantsPerMu" />
                                        <div class="unit">株</div>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td>灌溉区域：</td>
                                <td>
                                    <select name="" id="" disabled class="selectBox noInput" v-model="pageData.selectTr.deviceId">
                                        <option :value="item.deviceId" v-for="item in pageData.mapsDataList" :key="item.deviceId">
                                            {{ item.name }}
                                        </option>
                                    </select>
                                </td>
                            </tr>
                            <tr>
                                <td>区域面积：</td>
                                <td>
                                    <div class="inputNumber">
                                        <input disabled type="number" name="number" min="0" value="0" step="0.01" class="noInput" v-model="pageData.selectTr.area" />
                                        <div class="unit">亩</div>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td>首部压力：</td>
                                <td>
                                    <div class="inputNumber">
                                        <input type="number" name="number" min="0" value="0" step="0.01" v-model="pageData.selectTr.bowPressure" />
                                        <div class="unit">MPa</div>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td>阀门稳压：</td>
                                <td>
                                    <div class="inputNumber">
                                        <input type="number" name="number" min="0" value="0" step="0.01" v-model="pageData.selectTr.valvePressureRegulation" />
                                        <div class="unit">MPa</div>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td>压差报警：</td>
                                <td>
                                    <div class="inputNumber">
                                        <input type="number" name="number" min="0" value="0" step="0.01" v-model="pageData.selectTr.pressureDifferenceAlarm" />
                                        <div class="unit">MPa</div>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td>设计流量：</td>
                                <td>
                                    <div class="inputNumber">
                                        <input type="number" name="number" min="0" value="0" step="0.01" class="noInput" disabled v-model="pageData.selectTr.designFlow" />
                                        <div class="unit">m³</div>
                                    </div>
                                </td>
                            </tr>
                            <tr v-if="pageType == '1'">
                                <td>湿度阈值：</td>
                                <td>
                                    <div class="inputNumber">
                                        <input type="number" name="number" min="0" value="0" step="0.01" v-model="pageData.selectTr.humidityThreshold" />
                                        <div class="unit">%</div>
                                    </div>
                                </td>
                            </tr>
                            <tr v-else>
                                <td>风速阈值：</td>
                                <td>
                                    <div class="inputNumber">
                                        <input type="number" name="number" min="0" value="0" step="0.01" v-model="pageData.selectTr.windSpeedThreshold" />
                                        <div class="unit">%</div>
                                    </div>
                                </td>
                            </tr>
                        </table>
                    </el-scrollbar>
                </div>

                <div class="btnBox">
                    <div></div>
                    <div class="rightBtn">
                        <div class="btn" @click="submitData()">确定</div>
                        <div class="btn" @click="cutDoc()">返回</div>
                    </div>
                </div>
            </div>
            <!-- <div class="msgBox">
                <div class="msgItem">
                    <div class="iteml">
                        <div class="name">灌溉时间：</div>
                        <div class="content">
                            <div class="inputNumber dateTimeBox">
                                <input type="date" name="" id="" v-model="timeFrame.date" />
                                <input type="time" name="" id="" v-model="timeFrame.time" />
                            </div>
                        </div>
                    </div>
                </div>
                <div class="msgItem">
                    <div class="iteml">
                        <div class="name">清水时间：</div>
                        <div class="content">
                            <div class="inputNumber">
                                <input type="number" name="number" min="0" value="0" step="0.01" v-model="clearWater" />
                                <div class="unit">分</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="msgItem">
                    <div class="iteml">
                        <div class="name">灌溉选择：</div>
                        <div class="content">
                            <select name="" id="" class="selectBox" v-model="pageData.selectTr.irrigationSelectionId">
                                <option disabled value="">请选择</option>
                                <option value="1">清水优先</option>
                                <option value="2">肥水优先</option>
                                <option value="3">肥料优先</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="msgItem">
                    <div class="iteml">
                        <div class="name">株灌溉量：</div>
                        <div class="content">
                            <div class="inputNumber">
                                <input type="number" name="number" min="0" value="0" step="0.01" @input="calculateDesignFlow" v-model="pageData.selectTr.plantIrrigation" />
                                <div class="unit">升</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="msgItem">
                    <div class="iteml">
                        <div class="name">亩株数：</div>
                        <div class="content">
                            <div class="inputNumber">
                                <input type="number" name="number" min="0" value="0" step="0.01" @input="calculateDesignFlow" v-model="pageData.selectTr.plantsPerMu" />
                                <div class="unit">株</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="msgItem">
                    <div class="iteml">
                        <div class="name">灌溉区域：</div>
                        <div class="content">
                            <select name="" id="" disabled class="selectBox noInput" v-model="pageData.selectTr.deviceId">
                                <option :value="item.deviceId" v-for="item in pageData.mapsDataList" :key="item.deviceId">
                                    {{ item.name }}
                                </option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="msgItem">
                    <div class="iteml">
                        <div class="name">区域面积：</div>
                        <div class="content">
                            <div class="inputNumber">
                                <input disabled type="number" name="number" min="0" value="0" step="0.01" class="noInput" v-model="pageData.selectTr.area" />
                                <div class="unit">亩</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="msgItem">
                    <div class="iteml">
                        <div class="name">首部压力：</div>
                        <div class="content">
                            <div class="inputNumber">
                                <input type="number" name="number" min="0" value="0" step="0.01" v-model="pageData.selectTr.bowPressure" />
                                <div class="unit">MPa</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="msgItem">
                    <div class="iteml">
                        <div class="name">阀门稳压：</div>
                        <div class="content">
                            <div class="inputNumber">
                                <input type="number" name="number" min="0" value="0" step="0.01" v-model="pageData.selectTr.valvePressureRegulation" />
                                <div class="unit">MPa</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="msgItem">
                    <div class="iteml">
                        <div class="name">压差报警：</div>
                        <div class="content">
                            <div class="inputNumber">
                                <input type="number" name="number" min="0" value="0" step="0.01" v-model="pageData.selectTr.pressureDifferenceAlarm" />
                                <div class="unit">MPa</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="msgItem">
                    <div class="iteml">
                        <div class="name">设计流量：</div>
                        <div class="content">
                            <div class="inputNumber">
                                <input type="number" name="number" min="0" value="0" step="0.01" class="noInput" disabled v-model="pageData.selectTr.designFlow" />
                                <div class="unit">m³</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="msgItem">
                    <div class="iteml">
                        <div class="name">湿度阈值：</div>
                        <div class="content">
                            <div class="inputNumber">
                                <input type="number" name="number" min="0" value="0" step="0.01" v-model="pageData.selectTr.humidityThreshold" />
                                <div class="unit">%</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div> -->
            <!-- <div class="btnBox">
                <div></div>
                <div class="rightBtn">
                    <div class="btn" @click="submitData()">确定</div>
                    <div class="btn" @click="cutDoc()">返回</div>
                </div>
            </div> -->
        </div>
        <!-- <div class="chartBox" :class="pageData.selectTr ? 'chartBoxShows' : ''"> -->
        <div class="chartBox chartBoxShows">
            <div class="title">
                <select name="" id="" class="echartsSelectBox" v-model="pageData.echartsNav">
                    <option value="1">灌区压力</option>
                    <option value="2" v-if="pageType == '1'">灌区湿度</option>
                    <option value="3" v-else>灌区风速</option>
                </select>
                <span class="flicker" :class="pageData.alertor ? 'callthepolice' : ''"></span>
                <!-- <span class="flicker callthepolice"></span> -->
            </div>
            <div class="chartBoxCont">
                <div class="time">
                    <span>当前区域：{{ pageData.selectTr ? (pageData.selectTr.itemName ? pageData.selectTr.itemName : "无分区") : "无分区" }}</span>
                    <span v-if="pageData.echartsNav == '1'">
                        {{ pageType == "1" ? "滴灌" : "喷灌" }}压力：
                        {{ parameters.pressure }}
                        MPa
                    </span>
                    <span v-else-if="pageData.echartsNav == '2'">灌区湿度：{{ parameters.humidity }}%</span>
                    <span v-else>灌区风速：{{ parameters.windspeed }}m/s</span>
                </div>
                <echarts ref="echartsDoc" :key="pageData.echartsKey"></echarts>
            </div>
        </div>
        <!-- <div class="chartBox" :class="pageData.selectTr ? 'chartBoxShows' : ''">
            <div class="title">
                <select name="" id="" class="echartsSelectBox" v-model="pageData.echartsNav">
                    <option value="1">灌区压力</option>
                    <option value="2">灌区湿度</option>
                </select>
                <span class="flicker" :class="pageData.alertor ? 'green' : 'red'"></span>
            </div>
            <div class="time">
                <span>当前区域：{{ pageData.selectTr ? (pageData.selectTr.itemName ? pageData.selectTr.itemName : "无分区") : "无分区" }}</span>
                <span v-if="pageData.echartsNav == '1'">滴灌压力：{{ parameters.pressure }}MPa</span>
                <span v-else>灌区湿度：{{ parameters.humidity }}%</span>
            </div>
            <echarts ref="echartsDoc" :key="pageData.echartsKey"></echarts>
        </div> -->
        <!-- <operation v-if="pageData.selectTr" :data="pageData.selectTr" :key="pageData.operationKey" @operationData="operationData" @completeATarget="completeATarget"></operation> -->
        <operation :data="pageData.selectTr" :key="pageData.operationKey" @operationData="operationData" @completeATarget="completeATarget"></operation>
    </div>
</template>
<script setup lang="ts">
import { ref, reactive, onUnmounted, onMounted, watch } from "vue";
import { useRoute } from "vue-router";
import echarts from "@/views/echarts/echarts.vue";
import maps from "@/utils/initMap";
import operation from "@/views/operation/operation.vue";
import { getAllSubareaData, getAllSubareaList, updateSubareaMsg, startOrEndDoing, getAllSubareaPipeNetwork, getAllPipeNetwork } from "@/api/api";
import { tabelTrMouseover, tabelTrMouseout, timeConversion, popMsg, highpressure, subareaHandleStorage, getIrrigatedTime } from "@/utils/tools";
import deviceControl from "@/utils/devicecontrol";
const route = useRoute();
const pageType: any = route.meta.type;
const pageData: any = reactive({
    switchover: true,
    alertor: false, // 报警闪烁
    subarea: [], // 分区列表
    mapsDataList: [], // 分区地图列表参数
    selectTr: undefined, //点击选择的tabel列表数据
    // alertorTimer: undefined, // 报警时间定时器
    operationKey: new Date().getTime(),
    echartsNav: "1",
    echartsKey: new Date().getTime(),
    type: pageType, //
});
console.log(pageType, pageData);
// 灌溉时段
const timeFrame = reactive({
    date: "",
    time: "",
});
// 清水时间
const clearWater = ref(0);
const echartsDoc: any = ref(null);
// 开启报警
const setAlertor = () => {
    pageData.alertor = true;
};
// 停止报警
const stopAlertor = () => {
    pageData.alertor = false;
};
onUnmounted(() => {
    console.log("组件被取消挂载");
    stopAlertor();
});
// 拿到运行参数
const parameters = reactive({
    pressure: 0,
    humidity: 0,
    windspeed: 0,
});
const operationData = (data: any) => {
    data.forEach((d: any) => {
        // 滴灌压力io:11 喷灌压力io:12
        if ((d.io == 11 && pageType == "1" && pageData.echartsNav == "1") || (d.io == 12 && pageType == "2" && pageData.echartsNav == "1")) {
            parameters.pressure = d.value;
            echartsDoc.value.setData(d.value, highpressure());
            console.log(d.value + "灌压力");
            // 如果当前滴灌压力大于设置差压报警压力，开启报警闪烁状态
            if (d.value >= pageData.selectTr.pressureDifferenceAlarm) {
                setAlertor();
            } else {
                // 小于，取消报警状态
                stopAlertor();
            }
        }
        // 湿度
        if (d.io == 5 && pageData.echartsNav == "2") {
            parameters.humidity = d.value;
            echartsDoc.value.setData(d.value, highpressure());
            console.log(d.value + "湿度");
        }
        // 风速
        if (d.io == 4 && pageData.echartsNav == "3") {
            parameters.windspeed = d.value;
            echartsDoc.value.setData(d.value, highpressure());
            console.log(d.value + "风速");
        }
    });
    // 计算完成流量
    // completeATarget(data);
    // console.log(parameters);
    // pageData.selectTr.
};
// 计算设计流量
const calculateDesignFlow = () => {
    // 设计流量=株灌溉量*亩株数*区域面积/1000
    pageData.selectTr.designFlow = ((Number(pageData.selectTr.plantIrrigation) * Number(pageData.selectTr.plantsPerMu) * Number(pageData.selectTr.area)) / 1000).toFixed(2);
};

// 计算完成流量
const completeATarget = (data: any) => {
    // 完成流量=在统计时间内清水优先的求积  运行参数清水流量*灌溉时间 单位立方
    // 完成流量=在统计时间内清水优先的求积  运行参数肥水流量*灌溉时间 单位立方
    console.log(data, "机房数据，运行参数，计算进度");
    // 获取灌溉时间
    if (pageData.selectTr) {
        let irrigatedTime = getIrrigatedTime(pageData.selectTr.deviceId, pageType);
        data.forEach((d: any) => {
            // 清水优先
            if (pageData.selectTr.irrigationSelectionId == "1" && d.io == 0) {
                pageData.selectTr.wompletionFlow = (Number(irrigatedTime) * Number(d.value)).toFixed(2);
            }
            // 肥水优先
            if (pageData.selectTr.irrigationSelectionId == "2" && d.io == 0) {
                pageData.selectTr.wompletionFlow = (Number(irrigatedTime) * Number(d.value)).toFixed(2);
            }
        });
        setTimeout(() => {
            // 当前进度=在统计时间内完成流量/设计流量*100%
            if (Number(pageData.selectTr.designFlow) == 0) {
                pageData.selectTr.currentProgress = "0.00";
            } else {
                pageData.selectTr.currentProgress = ((Number(pageData.selectTr.wompletionFlow) / Number(pageData.selectTr.designFlow)) * 100).toFixed(2);
            }
            // 提交最新数据到数据库
            submitData(false);
        }, 500);
    }
};
// 别表item点击事件
const clicks = (item: any) => {
    pageData.selectTr = item;
    console.log(pageData.selectTr);
    stopAlertor();
    // stopAlertor();
    console.log(item);
    if (pageData.selectTr != undefined) {
        // 灌溉时间截取
        timeFrame.date = pageData.selectTr.irrigationPeriod.split(" ")[0];
        timeFrame.time = pageData.selectTr.irrigationPeriod.split(" ")[1];
        pageData.operationKey = new Date().getTime();
        pageData.echartsKey = new Date().getTime();
        // tabelTrMouseover(item, pageData.selectTr);
        let graphics = maps.graphicLayer.graphics;
        graphics.forEach((g: any) => {
            if (g.deviceId == item.deviceId) {
                pageData.selectTr.area = (g.area / 666.67).toFixed(2);
                setTimeout(() => {
                    maps.map.flyToGraphic(g, {
                        radius: 1500,
                    });
                }, 500);
            }
        });
    }

    // setAlertor();
};
// 打开或关闭参数详情
const cutDoc = () => {
    pageData.switchover = !pageData.switchover;
    clearWater.value = Number(pageData.selectTr.waterTime) * 60;
    // if (!pageData.switchover) {
    //     // 小时转分钟
    //     pageData.selectTr.waterTime = Number(pageData.selectTr.waterTime) * 60;
    // } else {
    //     pageData.selectTr.waterTime = Number(pageData.selectTr.waterTime) / 60;
    // }
};
// 获取所有的滴灌喷灌分区地图参数
const getMapList = () => {
    getAllSubareaData().then((res) => {
        pageData.mapsDataList = res.data;
        console.log(res, "分区");
        maps.setSubarea(res.data);
        getSubareaList(res.data);
    });
    getAllSubareaPipeNetwork().then((res: any) => {
        console.log(res, "主管道");
        maps.setSubarea(res.data, false);
    });
    getAllPipeNetwork().then((res: any) => {
        console.log(res, "管网");
        maps.setSubarea(res.data, false);
    });
};
setTimeout(() => {
    getMapList();
}, 500);
// 获取所有的滴灌喷灌分区列表
const getSubareaList = (data: any) => {
    // 获取滴灌列表
    getAllSubareaList(pageType).then((res) => {
        pageData.subarea = res.data;
        // 默认选择第一个
        // if (pageData.subarea.length > 0) {
        //     setTimeout(() => {
        //         clicks(pageData.subarea[0]);
        //         tabelTrMouseover(pageData.subarea[0], pageData.selectTr);
        //     }, 1000);
        // }
        known();
        data.forEach((m: any) => {
            pageData.subarea.forEach((s: any) => {
                if (m.deviceId == s.deviceId) {
                    s.itemName = m.name;
                }
                if (s.irrigationSelectionId == null) {
                    s.irrigationSelectionId = "0";
                }
                // if (s.valveCondition == "" || s.valveCondition == null || s.valveCondition == undefined) {
                //     s.valveCondition = "1";
                // }
            });
        });
    });
};
// 计算灌溉量
const irrigationvolume = () => {
    if (pageData.selectTr) {
        let a = pageData.selectTr.plantIrrigation ? Number(pageData.selectTr.plantIrrigation) : 0;
        let b = pageData.selectTr.plantsPerMu ? Number(pageData.selectTr.plantsPerMu) : 0;
        return a * b;
    } else {
        return 0;
    }
};

// 修改滴灌喷灌分区参数
const submitData = (tip: boolean = true) => {
    // 转换清水时间
    if (tip) {
        // pageData.selectTr.waterTime = Number(pageData.selectTr.waterTime) / 60;
        pageData.selectTr.waterTime = Number(clearWater.value) / 60;
        pageData.selectTr.irrigationPeriod = `${timeFrame.date} ${timeFrame.time}`;
    }
    // pageData.switchover = true;
    // console.log(pageData.selectTr);
    // return;
    console.log(pageData.selectTr, "修改滴灌喷灌分区参数");
    updateSubareaMsg(pageData.selectTr).then((res) => {
        getSubareaList(pageData.mapsDataList);
        if (tip) {
            popMsg.success("修改成功");
            pageData.switchover = true;
        }
    });
};
// 罐区操作开始或停止 0关 1开
const subareaHandle = (type: string) => {
    if (type == "1") {
        pageData.subarea.forEach((s: any) => {
            if (s.valveCondition == 1 && s.deviceId != pageData.selectTr.deviceId) {
                popMsg.error(`${s.itemName}设备正在运行，请先关闭再运行${pageData.selectTr.itemName}设备！`);
                return false;
            }
        });
        if (pageData.selectTr.irrigationSelectionId == "0") {
            popMsg.error("请先选择灌溉方式！");
            return false;
        }
    }
    // let data = {
    //     addr: pageData.selectTr.deviceId,
    //     status: type,
    //     type: pageType,
    // };
    deviceControl(pageData.selectTr, type, pageType, (data: any) => {
        if (data) {
            // 记录设备开始时间，用于计算完成流量和完成进度
            subareaHandleStorage(pageData.selectTr.deviceId, pageType);
            // console.log(data);
            // console.log("操作成功");
            if (pageData.selectTr.valveCondition == "1") {
                pageData.selectTr.valveCondition = "0";
            } else {
                pageData.selectTr.valveCondition = "1";
            }
            // 提交新的数据到数据库
            submitData(false);
            popMsg.error(`${pageData.selectTr.itemName}设备${type == "1" ? "打开" : "停止"}成功！`);
            known();
        }
    });
    // startOrEndDoing(data).then((res) => {
    //     popMsg.success(`${type == "0" ? "设备已停止" : "设备已开启"}`);
    //     getSubareaList(pageData.mapsDataList);
    // });
};
//判断分区是否已灌溉
const known = () => {
    pageData.subarea.forEach((s: any) => {
        let kn = localStorage.getItem(`${s.deviceId}-${pageType}`);
        if (kn) {
            let endTime = JSON.parse(kn).endTime;
            if (endTime) {
                s.irrigationStatus = 2;
            } else {
                s.irrigationStatus = 1;
            }
        } else {
            s.irrigationStatus = 1;
        }
    });
};
watch(
    () => pageData.echartsNav,
    (o, l) => {
        pageData.echartsKey = new Date().getTime();
        pageData.operationKey = new Date().getTime();
    }
);
</script>
<style scoped lang="scss">
.chartBox {
    .title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .flicker {
            display: inline-block;
            width: 0.17rem;
            height: 0.17rem;
            border-radius: 100%;
            background: #09a852;
        }
        .callthepolice {
            animation: callthepolice 0.2s infinite;
        }
        @keyframes callthepolice {
            from {
                background: #a10303;
            }
            to {
                background: #09a852;
            }
        }
        // .green {
        //     background: #09a852;
        // }
        // .red {
        //     background: #a10303;
        // }
    }
}
.dateTimeBox {
    input {
        border: none;
    }
}
</style>
